<template>
    <div>
        <div class="det-checked det-click" @click="clickServic" style="margin-top: 0px; border-top: 1px solid #f8f8f8">
            <div class="checked-tit">服务</div>
            <div class="checked-con">
                <span class="check-sku">{{ serviceStr }}</span>
            </div>
            <div class="more">...</div>
        </div>

        <div class="popup-hide" :class="{ show: showService }" @click.stop>
            <div class="popup-box">
                <div class="popup-tit">
                    <em class="tit">服务信息</em>
                    <i class="close close-pop" @click="closeAll"></i>
                </div>
                <div class="popup-con promotion-msg">
                    <div class="item" v-if="goodsDetArr.payAtGoodsArrived">
                        <div class="item-tit">
                            <span class="iconfont iconselectItem text-main mr" style="font-size: 12px"></span>
                            <em class="tit-em">货到付款</em>
                        </div>
                        <div class="item-con">
                            <div class="gifts">
                                <span class="gifts-txt">此商品支持货到付款</span>
                            </div>
                        </div>
                    </div>
                    <div class="item" v-if="goodsDetArr.goodsType == 'overseas' && goodsDetArr.customDutyType == 'DUTY_INCLUDE'">
                        <div class="item-tit">
                            <span class="iconfont iconselectItem text-main mr" style="font-size: 12px"></span>
                            <em class="tit-em">商品含税</em>
                        </div>
                        <div class="item-con">
                            <div class="gifts">
                                <span class="gifts-txt">您购买的商品已包含跨境电商进口税， 无需再进行支付</span>
                            </div>
                        </div>
                    </div>
                    <div class="item" v-if="goodsDetArr.goodsType == 'overseas' && goodsDetArr.crossBorderType == 'BONDED_WAREHOUSE'">
                        <div class="item-tit">
                            <span class="iconfont iconselectItem text-main mr" style="font-size: 12px"></span>
                            <em class="tit-em">保税发货</em>
                        </div>
                        <div class="item-con">
                            <div class="gifts">
                                <span class="gifts-txt">本商品由保税仓发货</span>
                            </div>
                        </div>
                    </div>

                    <div class="item" v-if="goodsDetArr.deliveryTypeDTO.merchantDelivery">
                        <div class="item-tit">
                            <span class="iconfont iconselectItem text-main mr" style="font-size: 12px"></span>
                            <em class="tit-em">商家配送</em>
                        </div>
                        <div class="item-con">
                            <div class="gifts">
                                <span class="gifts-txt">可选择快递发货配送上门</span>
                            </div>
                        </div>
                    </div>

                    <div class="item" v-if="goodsDetArr.deliveryTypeDTO.sinceMention">
                        <div class="item-tit">
                            <span class="iconfont iconselectItem text-main mr" style="font-size: 12px"></span>
                            <em class="tit-em">到店自提</em>
                        </div>
                        <div class="item-con">
                            <div class="gifts">
                                <span class="gifts-txt">可选择指定自提点自行提取商品</span>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="popup-btn" @click="closeAll">我知道了</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        goodsDetArr: [String, Object]
    },
    data() {
        return {
            showService: false,
            goodsDet: null,
            serviceStr: ''
        }
    },
    watch: {},
    mounted() {
        let StringArr = []
        if (this.goodsDetArr.payAtGoodsArrived) {
            StringArr.push(' ▪ 货到付款')
        }
        if (this.goodsDetArr.goodsType == 'overseas' && this.goodsDetArr.customDutyType == 'DUTY_INCLUDE') {
            StringArr.push(' ▪ 商品含税')
        }
        if (this.goodsDetArr.goodsType == 'overseas' && this.goodsDetArr.crossBorderType == 'BONDED_WAREHOUSE') {
            StringArr.push(' ▪ 保税发货')
        }

        if (this.goodsDetArr.deliveryTypeDTO.merchantDelivery) {
            StringArr.push(' ▪ 商家配送')
        }

        if (this.goodsDetArr.deliveryTypeDTO.sinceMention) {
            StringArr.push(' ▪ 到店自提')
        }

        // StringArr.push(' ▪ 快递发货')

        // StringArr.
        let newStr = StringArr.join(',').slice(3).split(',')

        if (newStr.length > 3) {
            newStr.pop()
            this.serviceStr = newStr.join(',').split(',').join('')
        } else {
            this.serviceStr = newStr.join(',').split(',').join('')
        }
    },
    methods: {
        clickServic() {
            this.showService = true
        },
        closeAll() {
            this.showService = false
        }
    }
}
</script>
<style lang="stylus" scoped></style>
